<!-- 优惠劵详情 -->
<template>
	<view class="page_box">
		<view class="head_box">
			<cu-custom :isBack="true">
				<block slot="backText">提交凭证</block>
				<block slot="content"></block>
			</cu-custom>
		</view>
		<view class="content_box">
			<view class="acctNum padding flex justify-between align-center">
				<text>支付账号</text>
				<input type="text" value="" v-model="account" placeholder="请输入的支付账号" style="width: 60vw; text-align: right;" />
			</view>

			<view class="acctNum padding flex justify-between align-center">
				<text>支付金额</text>
				<input type="number" value="" v-model="amount" placeholder="请输入的支付金额" style="width: 60vw; text-align: right;" />
			</view>
			<view class="acctNum padding flex justify-between align-center">
				<text>交易单号</text>
				<input type="number" value="" v-model="orderid" placeholder="请输入的交易单号" style="width: 60vw; text-align: right;" />
			</view>

			<view class="img-box">
				<view class="preview-box" v-for="(item, index) in imgList" :key="index">
					<image class="preview-img" @click="yulan(imgList)" :src="item" mode="aspectFill"></image>
					<text class="cuIcon-close" @tap="DelImg(index)"></text>
				</view>
				<view class="choose-img x-c" @tap="onChooseImg" v-if="imgList.length < 1"><text class="cuIcon-cameraadd"></text></view>
			</view>

			<button class="head submit cu-btn" @click="uploadNow">立即上传</button>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			account: '', //账号
			orderid: '', //单号
			amount: '', //金额
			imgList: [], //图片
		};
	},
	computed: {},
	onLoad() {},
	methods: {
		async uploadNow() {
			if ([this.account, this.orderid, this.amount].includes('') || this.imgList.length == 0) {
				return this.$tools.toast('内容不能为空');
			}

			let that = this;
			that.$api('payOrdr', {
				account: this.account,
				orderid: this.orderid,
				amount: this.amount,
				prove: this.imgList[0],
			}).then(res => {
				console.log('res :>> ', res);
				if (res.code == 1) {
					this.$refs.uToast.show({
						title: '上传成功,请等待审核',
						type: 'default',
						url: '/pages/index/user',
					});
				}
			});
		},
		async yulan(urls) {
			console.log('858 :>> ', 858);
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		// 选择图片
		async onChooseImg() {
			let that = this;
			that.$tools.chooseImage(1).then(res => {
				that.$tools.uploadImage('index/upload', res[0]).then(res => {
					that.imgList = [res.full_url];
					console.log('that.imgList :>> ', that.imgList);
				});
			});
		},
		DelImg(index) {
			uni.showModal({
				title: '删除照片',
				content: '确定要删除这张照片么？',
				cancelText: '取消',
				confirmText: '删除',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(index, 1);
					}
				},
			});
		},

		click(e) {
			if (e == 0) {
				this.def = '微信';
			} else if (e == 1) {
				this.def = '支付宝';
			} else {
				this.def = '银行卡';
			}
		},
		jump(path, parmas) {
			console.log('111 :>> ', 111);
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		// 适用商品
		getCouponGoods() {
			let that = this;
			that.$api('coupons.goods', {
				id: that.$Route.query.id,
			}).then(res => {
				if (res.code === 1) {
					that.couponGoods = res.data.data;
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
page,
.content_box {
	font-family: PingFang SC;
	.acctNum {
		width: 690rpx;
		height: 90rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	.img-box {
		width: 690rpx;

		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		//margin-top: 20rpx;
		.choose-img,
		.preview-box {
			width: 213rpx;
			height: 213rpx;
			border-radius: 10rpx;
			background: rgba(249, 250, 251, 1);
			border: 1rpx solid rgba(223, 223, 223, 1);
			margin-right: 25rpx;
			margin-bottom: 25rpx;
			position: relative;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.cuIcon-cameraadd {
				font-size: 50rpx;
				color: #dfdfdf;
			}
			.preview-img {
				width: 100%;
				height: 100%;
			}
			.cuIcon-close {
				background: linear-gradient(90deg, rgba(216, 159, 100, 1), rgba(235, 193, 150, 1));
				border-radius: 50%;
				width: 40rpx;
				line-height: 40rpx;
				color: #fff;
				text-align: center;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}
	}
}
.page_box {
	// background: linear-gradient(180deg, #8ed3f2 0%, #86efc4 98%);
	background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
}

.head {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 90rpx;
	//background: linear-gradient(0deg, #d9b068, #e6d5a1);
	border-radius: 20rpx;

	font-size: 32rpx;

	font-weight: 600;

	margin: 0 auto;
	margin-top: 50rpx;
}

.submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 90rpx;
	background: linear-gradient(0deg, #d9b068, #e6d5a1);
	// background-color: #ffffff;
	border-radius: 20rpx;

	font-size: 32rpx;

	font-weight: 500;
	color: #673b00;
	margin: 0 auto;
	position: absolute;

	left: 50%;
	bottom: 150rpx;
	transform: translateX(-50%);
}
// 优惠券商品
</style>
